<template>
  <div class="main">
    <el-empty v-show="JSON.stringify(showOneExpert) === '{}'" :image-size="100"></el-empty>
    <div v-show="JSON.stringify(showOneExpert) !== '{}'">
      <el-descriptions class="margin-top" :column="4" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{showOneExpert.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-male"></i>
            性别
          </template>
          {{showOneExpert.sex}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-reading"></i>
            专家级别
          </template>
          <el-tag size="small">{{showOneExpert.level}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ showOneExpert.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-monitor"></i>
            邮箱地址
          </template>
          {{showOneExpert.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-info"></i>
            介绍
          </template>
          {{showOneExpert.info}}
        </el-descriptions-item>
      </el-descriptions>
      <div class="query">
        <el-button type="primary" plain @click="query">咨询当前专家</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "ShowExpertResult",
  data () {
    return {
      size: ''
    }
  },
  methods:{
    query(){
      if (this.loginUser.isLogin){

      }else {
        this.$message.error("登陆后可咨询专家")
      }
    }
  },
  computed:{
    ...mapState('expert',['showOneExpert']),
    ...mapState('user',['loginUser'])
  }
}
</script>

<style scoped>
  .main{
    margin: 0 40px;
  }

  .query{
    text-align: right;
    margin-top: 10px;
  }
</style>